import React, { Component } from 'react';
import { NavBar, Icon, SearchBar,Toast } from "antd-mobile"
import "./SearchCenter.css";
import {withRouter} from "react-router-dom";
import myaxios from "../../utils/myaxios";
class SearchCenter extends Component {
    state = {
        inputVal: "",
        productList: [
            // {
            //     goods_id: 57406,
            //     goods_name:
            //         "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
            // },
            // {
            //     goods_id: 57407,
            //     goods_name:
            //         "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
            // },
            // {
            //     goods_id: 57408,
            //     goods_name:
            //         "沿途(YANTU)车载充电器一拖三点烟器汽车用双USB多功能充电器车充 黑色带电压监测",
            // },
        ],
    }
    getProductList() {
        if(!this.state.inputVal){
            alert("搜索不能为空")
        }
        myaxios.get("goods/qsearch",{
            params:{
                query:this.state.inputVal
            }
        }).then((res) => {
            console.log(res);
            this.setState({
                productList:res
            })
            if(this.state.productList.length === 0){
                Toast.fail('暂无数据', 1, null,false)
            }
        }
        )
    }
    handleItemClick=(e)=>{
        let good_id = e.target.getAttribute("data-goods_id");
        console.log(good_id);
        console.log(this.props);
        this.props.history.push("/goodDetail/"+good_id);
    }
    render() {
        return (
            <div className="yg-sc">
                <div className="yg-sc-nav">
                    <NavBar
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >搜索中心</NavBar>
                </div>
                {/* 搜索中心输入框开始 */}

                <SearchBar
                    value={this.state.inputVal}
                    className="yg-sc-search"
                    placeholder="Search"
                    //键盘按下enter键触发
                    onSubmit={value => this.getProductList()}
                    //清除所有内容时触发
                    onClear={value => console.log(value, 'onClear')}
                    //聚焦的时候触发
                    // onFocus={() => console.log('onFocus')}
                    //失去焦点的时候触发
                    // onBlur={() => console.log('onBlur')}
                    onCancel={() => this.getProductList()}
                    showCancelButton
                    cancelText="搜索"
                    //内容改变的时候触发
                    onChange={(value) => {
                        console.log(value);
                        this.setState({
                            inputVal: value
                        })
                    }}
                />
                {/* 搜索中心输入框结束 */}
                {/* 产品列表的开始 */}
                <div className="yg-sc-list" onClick={this.handleItemClick}>
                    {this.state.productList&&this.state.productList.map((v) => {
                        return (
                            <div className="sc-list-item" key={v.goods_id} data-goods_id={v.goods_id}>
                                {v.goods_name}
                            </div>
                        )
                    }
                    )}
                </div>
                {/* 产品列表的结束 */}
            </div>
        );
    }
}

export default withRouter(SearchCenter);
